<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>有奖答题平台</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link rel="stylesheet" href="/mobile/css/bui.css" />
    <style>
        .bui-fluid-space-3 .bui-check {
            margin-bottom: .2rem;
        }

        .selected-val {
            margin-right: .1rem;
        }

        .bui-pickerdate {
            text-align: right;
            padding-right: .1rem;
        }
    </style>
</head>
<body>
<div class="bui-page page-form">
    <input type="hidden" name="dept3" id="dept3" value=""/>
    <input type="hidden" name="dept4" id="dept4" value=""/>
    <header class="bui-bar">
        <div class="bui-bar-left">
            <a class="bui-btn" onclick="bui.back();"><i class="icon-back"></i></a>
        </div>
        <div class="bui-bar-main">用户注册</div>
        <div class="bui-bar-right">
        </div>
    </header>
    <main>
        <h3 class="section-title warning">仅限本单位人员注册登录！</h3>
        <ul class="bui-list">
            <li class="bui-btn bui-box clearactive">
                <label class="bui-label" for="usrname">姓名:</label>
                <div class="span1">
                    <div class="bui-input user-input">
                        <input id="usrname" type="text" value="" placeholder="请输入姓名">
                    </div>
                </div>
            </li>
            <li class="bui-btn bui-box clearactive">
                <label class="bui-label" for="phone">手机号:</label>
                <div class="span1">
                    <div class="bui-input user-input">
                        <input id="phone" type="number" value="" placeholder="请输入手机号">
                    </div>
                </div>
            </li>
            <li class="bui-btn bui-box clearactive">
                <label class="bui-label">验证码:</label>
                <div class="span1">
                    <input type="text" id="code" class="bui-input" value="" placeholder="请输入验证码" maxlength="6">
                </div>
                <div class="bui-btn primary-reverse mini ring" id="btnSend">发送验证码</div>
            </li>
        </ul>
        <div class="bui-box">
            <div class="span1">
                <div id="provinceSelect" class="bui-btn bui-box">
                    <div class="span1">一级单位</div>
                    <i class="icon-listright"></i>
                </div>
            </div>
            <div class="span1">
                <div id="citySelect" class="bui-btn bui-box">
                    <div class="span1">二级单位</div>
                    <i class="icon-listright"></i>
                </div>
            </div>
        </div>
        <div class="bui-interval">
            <div class="bui-btn" id="regedit">注册</div>
        </div>
    </main>

</div>

<script src="/lib/mobile/js/zepto.js"></script>
<script src="/lib/mobile/js/plugins/fastclick.js"></script>
<script src="/lib/mobile/js/bui.js"></script>
<script src="/lib/mobile/js/common.js?111    "></script>
<script>
    var uid;
    bui.ready(function () {
        // 这里写业务及控件初始化
        var storage = bui.storage();
        var uid=storage.get("uid");
        uid=uid[0];
        bui.btn({id: ".bui-page", handle: ".bui-btn"}).load();
        var pageview = {};
        pageview.init = function () {
            //静态渲染, 选中激活在列表的active样式
            // var uiDoropdown2 = bui.dropdown({
            //     id: "#uiDoropdownClass",
            //     //设置relative为false,二级菜单继承父层宽度
            //     relative: true,
            //     value: "",
            //     callback: function(e) {
            //         console.log(this.value());
            //
            //     }
            // })
            levelSelect();
            $("#phone").blur(function(){
                if($(this).val()==''){
                    bui.hint("手机号不能为空");
                }
                var loginAjax = bui.ajax({
                    url: BASE_URL+"mobile/checkPhone",
                    // 可选参数
                    data: {
                        phone:$(this).val()
                    },
                    method: "POST"
                });
                loginAjax.then(function(res) {
                    if(res.code >= 0){
                        bui.input({
                            id: ".phone",
                            callback: function(e) {
                                // 清空数据
                                this.empty();
                            }
                        })
                        bui.hint(res.msg);
                    }else if(res.code == -1){
                        bui.input({
                            id: ".phone",
                            callback: function(e) {
                                // 清空数据
                                this.empty();
                            }
                        })
                        bui.hint("注册失败");
                    }
                },function(res) {
                    bui.alert("请求异常");
                })
            });
            $("#btnSend").on("click", function (argument) {
                var phone = $("#phone").val();
                var usrname = $("#usrname").val();
                if($.trim(usrname) == ""){
                    bui.alert("用户名不能为空");
                    return ;
                }
                if($.trim(phone) == ""){
                    bui.alert("手机号不能为空");
                    return ;
                }
                var hasDisabled = $(this).hasClass("disabled");
                if (!hasDisabled) {
                    var data = {
                        uid:$("#usrname").val(),
                        phone:phone
                    }
                    var codeAjax = bui.ajax({
                        url: BASE_URL+"mobile/sendRegeditValidCode",
                        // 可选参数
                        data:data,
                        method: "GET"
                    });
                    codeAjax.then(function(res) {
                        if(res.code == 0){
                            $("#btnSend").addClass("disabled")
                            bui.alert(res.msg);
                            timer.restart();
                        }else{
                            bui.alert(res.msg);
                        }
                    },function(res) {
                        bui.alert("请求异常");
                    })
                }
            });
            var timer = bui.timer({
                onEnd: function () {
                    $("#btnSend").removeClass("disabled").text("重新获取验证码");
                },
                onProcess: function (e) {
                    var valWithZero = e.count < 60 ? "0" + e.count : e.count;
                    $("#btnSend").text(valWithZero + "后重新获取");
                },
                times: 60
            });
            $("#regedit").on("click", function (argument) {
                var phone = $("#phone").val();
                var usrname = $("#usrname").val();
                var dept1 = $("#dept3").val();
                var dept2 = $("#dept4").val();

                if($.trim(usrname) == ""){
                    bui.alert("用户名不能为空");
                    return ;
                }
                if($.trim(phone) == ""){
                    bui.alert("手机号不能为空");
                    return ;
                }
                if($.trim(dept1) == ""){
                    bui.alert("三级部门不能为空");
                    return ;
                }
                // if($.trim(dept2) == ""){
                //     bui.alert("四级部门不能为空");
                //     return ;
                // }
                var code = $("#code").val();
                if($.trim(code) == ""){
                    bui.alert("验证码为空");
                    return ;
                }
                //执行登录操作
                var loginAjax = bui.ajax({
                    url: BASE_URL+"mobile/doRegedit",
                    // 可选参数
                    data: {
                        name:$("#usrname").val(),
                        phone:$("#phone").val(),
                        dept3:$("#dept3").val(),
                        dept4:$("#dept4").val(),
                        code:$("#code").val(),
                    },
                    method: "POST"
                });
                loginAjax.then(function(res) {
                    if(res.code == 0){
                        var user = res.data;
                        if(user){
                            var storage = bui.storage();
                            var token = user.token;
                            storage.set("yhbm",user.xm);
                            storage.set("phone",user.phone);
                            storage.set("user",user);
                            storage.set("uid",user.id);
                            storage.set("token",token);
                            bui.alert("登录成功");
                            TOKEN = token;
                            bui.config.ajax = {
                                headers: {
                                    token:token
                                }
                            };
                            bui.load({ url: BASE_URL+"mobile/index"});
                        }
                    }else{
                        bui.alert(res.msg);
                    }
                },function(res) {
                    bui.alert("请求异常");
                })
            });
        }
        pageview.init();
    })
    // 初始化状态值
    var cityFirstInit = true;
    function levelSelect() {
        var uiMask = bui.mask();
        /* 一, 初始化控件 */

        // 城市的数据
        var chineseCities ;
        var uiLoading = bui.loading();

        // 省份
        var provinceSelect = bui.select({
            trigger: "#provinceSelect",
            title: "三级单位",
            type: "radio",
            height: 300,
            autoClose: true,
            field: {
                value: "sjdwmc"
            },
            data: []
        });

        // 城市
        var citySelect = bui.select({
            trigger: "#citySelect",
            title: "四级单位",
            type: "radio",
            height: 300,
            autoClose: true,
            field: {
                value: "dwmc"
            },
            data: []
        });

        /* 二, 监听控件的事件变化 */

        // 选择省份以后
        provinceSelect.on("change", function() {
            var index = provinceSelect.index() || 0;

            // console.log(chineseCities[index].dwmc[index]);
            // 激活第一个城市
            chineseCities.dwmc = chineseCities[index].dwmc[index];

            var dwmcObj = chineseCities[index].dwmc;
            // console.log(dwmcObj)
            var dwmcArr=[];
            for(var i=0;i<dwmcObj.length;i++){
                dwmcArr.push(dwmcObj[i].dwmc);
            }
            citySelect.option("data", dwmcArr);

            if (!cityFirstInit) {
                // 显示城市选择
                citySelect.show("none");
            }
            var province = provinceSelect.text();
            $("#dept3").val(province);
            // 第一次初始值
            if (cityFirstInit) {
                citySelect.active(0);
                cityFirstInit = false;
            }
        })

        // 选择地区以后
        citySelect.on("change", function() {

            var province = provinceSelect.text(),
                city = citySelect.text(),
                address = "";

            // if (province == city) {
            //     address = province ;
            // } else {
            //     address = province + city ;
            // }
            // 输出地址
            $("#dept3").val(province)
            $("#dept4").val(city)
            // console.log(address);

        })

        /* 三, 填充省份的第一个列表 */

        uiLoading.show();

        // 获取中国省份的数据
        bui.ajax({ url: BASE_URL+"mobile/getDeptList" }).then(function(datas) {
            //省份数据
            chineseCities = datas.data;

            // console.log()
            var sjdwmcArr=[];
            // for(var i=0;i<dept.length;i++){
            //
            // }
            $.each(chineseCities, function(i,n) {
                sjdwmcArr.push(n.sjdwmc);
                // sjdwmcArr={"sjdwmc":n.sjdwmc};
            });
            // console.log(chineseCities)
            chineseCities.province = sjdwmcArr;
            //初始化省份的select
            provinceSelect.option("data", sjdwmcArr);

            // 初始化省的第一个数据,触发change事件,再设置城市初始值
            provinceSelect.active(0);

            uiLoading.hide();
        })

    }
</script>
</body>
</html>